<template>
  <div id="app">
    <!--导航栏-->
    <!-- <div class="nav">
      <div
        class="back"
        @click="onClickLeft()"
      >
        <a class="leftCoin"></a>返回</div>
      <div class="center">实名认证</div>
    </div>-->
    <div class="warn_title">请完善邮储银行卡信息认证</div>
    <van-field
      v-model="name"
      label="持卡人"
      placeholder="请输入您的真实姓名"
      rows="1"
      clearable
      autosize
      maxlength="20"
      :error-message="res"
      @blur="nameRes()"
    />
    <van-field
      v-model="cardNumber"
      label="身份证"
      placeholder="请输入身份证号后6位"
      rows="1"
      maxlength="6"
      clearable
      autosize
      :error-message="numRes"
      @blur="idRes()"
    />
    <van-field
      v-model="telNumber"
      label="手机号"
      type="number"
      placeholder="请输入正确手机号"
      :error-message="telRes"
      rows="1"
      clearable
      autosize
      @blur="telReq()"
    />
    <van-field
      v-model="codeVal"
      center
      clearable
      label="验证码"
      placeholder="请输入短信验证码"
      rows="1"
      maxlength="6"
      :error-message="codeRes"
      @blur="codeNum()"
    >
      <van-button
        class="codeBtn"
        @click="show ? '' : getCode()"
        slot="button"
        size="small"
        :color="show ? 'grey' : '#28b46a'"
        >{{ count }}</van-button
      >
      <!-- <span v-else slot="icon">{{count}} s</span> -->
    </van-field>
    <van-field
      v-model="imgCode"
      center
      clearable
      label="图形验证码"
      placeholder="请输入图形验证码"
      rows="1"
    >
      <img
        slot="button"
        @click="dateTime = new Date()"
        class="code"
        :src="baseURL + '/tuser/randomcode?time=' + dateTime"
        alt
      />
      <!-- <span v-else slot="icon">{{count}} s</span> -->
    </van-field>
    <van-button @click="next" class="finish" size="large" type="primary"
      >完成</van-button
    >
    <!-- <transition name="fade" v-if="showConfirmpopup">
      <div class="mask">
        <div class="confirm-popup">
          <h2 class="title">大侠</h2>
          <div class="content">
            <p>系统打怪升级中，</p>
            <p>如您确认信息录入正确，</p>
            <p>
              请点击
              <span class="color-red">「回到首页」</span>，
            </p>
            <p>五个工作日会完成认证审核</p>
          </div>
          <div class="btn_wrapper">
            <button class="confirm" @click="toHome()">回到首页</button>
            <button @click="showConfirmpopup=false">重新输入</button>
          </div>
        </div>
      </div>
    </transition>-->
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Field, Button, Toast, Dialog } from 'vant';
import { baseURL } from '@/components/Request';
Vue.use(Dialog);
export default {
  data() {
    return {
      name: '',
      baseURL,
      dateTime: new Date().getTime(),
      cardNumber: '',
      res: '',
      numRes: '',
      userID: '',
      userIdRes: '',
      telNumber: '',
      codeVal: '',
      codeRes: '',
      imgCode: '',
      telRes: '',
      count: '获取验证码',
      show: false,
      showConfirmpopup: false,
      protocol: false, // 同意协议
      showSecret: false
    };
  },
  methods: {
    beforeClose(action, done) {
      if (action === 'confirm') {
        this.protocol = true;
        done();
      }
    },
    toProtocol() {
      this.showSecret = true;
    },
    telReq() {
      if (this.telNumber.match(/^[1][3,4,5,6,7,8,9][0-9]{9}$/)) {
        this.telRes = '';
      } else {
        this.telRes = '手机号码格式不正确';
      }
    },
    getCode() {
      const TIME_COUNT = 60;
      if (this.telNumber.match(/^[1][3,4,5,6,7,8,9][0-9]{9}$/)) {
        this.$http
          .post('/entrance/getSmsCode', {
            telphone: this.telNumber,
            source: 0
          })
          .then(result => {
            if (result) {
              if (result.data.code === '0') {
                Toast('发送成功');
              } else {
                Toast(result.data.message);
                return;
              }
            }
          });
      } else {
        Toast('请输入正确手机号码');
        return;
      }
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = false;
            this.count = '获取验证码';
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    codeNum() {
      if (this.codeVal) {
        this.codeRes = '';
      } else {
        this.codeRes = '请输入验证码';
      }
    },
    nameRes() {
      if (this.name) {
        // match(/^[\u4e00-\u9fa5]{1,}$/)
        if (this.name.length > 1) {
          this.res = '';
        } else {
          this.res = '姓名格式不正确';
        }
      } else {
        this.res = '姓名不能为空';
      }
    },
    idRes() {
      if (this.cardNumber) {
        if (this.cardNumber.length !== 6) {
          this.numRes = '请输入身份证后6位';
        } else {
          this.numRes = '';
        }
      } else {
        this.numRes = '身份证号不能为空';
      }
    },
    checkForm() {
      let isOk = true;
      if (this.name) {
        // match(/^[\u4e00-\u9fa5]{1,}$/)
        if (this.name.length > 1) {
          this.res = '';
        } else {
          this.res = '姓名格式不正确';
          isOk = false;
        }
      } else {
        this.res = '姓名不能为空';
        isOk = false;
      }
      if (this.cardNumber) {
        if (this.cardNumber.length < 6) {
          this.numRes = '卡号格式不正确';
          isOk = false;
        }
        // if (this.cardNumber.match(/^([4,5,9,6]{1})(\d{16}|\d{18})$/)) {
        //   this.numRes = '';
        // } else {
        //   this.numRes = '卡号格式不正确';
        //   isOk = false;
        // }
      } else {
        this.numRes = '卡号不能为空';
        isOk = false;
      }
      if (this.telNumber.match(/^[1][3,4,5,6,7,8,9][0-9]{9}$/)) {
        this.telRes = '';
      } else {
        this.telRes = '手机号码格式不正确';
        isOk = false;
      }
      if (this.codeVal.length > 3) {
        this.codeRes = '';
      } else {
        this.codeRes = '请输入验证码';
        isOk = false;
      }
      return isOk;
    },
    toHome() {
      this.$router.replace({
        path: 'home'
      });
    },
    next() {
      if (!this.checkForm()) {
        return;
      }
      this.$http
        .post('/tuserWhitlist/userCheck', {
          username: this.name,
          idCardNo: this.cardNumber,
          telphone: this.telNumber,
          code: this.codeVal,
          imgCode: this.imgCode
          // accId: this.$route.query.userid
        })
        .then(res => {
          this.dateTime = new Date().getTime();
          if (res.data.code === '0') {
            Dialog.alert({
              title: '温馨提示',
              message: `${res.data.message}`
            }).then(() => {
              this.$http.post('/tuser/userInfo', {}).then(res => {
                if (res.data.code === '0') {
                  if (window.sessionStorage.getItem('message')) {
                    this.$http
                      .post('/seckill/seckillBind', {
                        inviterWhiteId: window.sessionStorage.getItem(
                          'message'
                        ),
                        inviteeWhiteId: res.data.object.bankUserid,
                        userName: res.data.object.username,
                        idCardNo: res.data.object.idCardNo,
                        telphone: res.data.object.telphone
                      })
                      .then(result => {
                        console.log(result);
                        this.$router.push('/home');
                        // this.$router.go(-1);
                      });
                  } else if (this.$route.query.password) {
                    this.$http
                      .post('/seckill/seckillBind', {
                        inviterWhiteId: this.$route.query.password,
                        inviteeWhiteId: res.data.object.bankUserid,
                        userName: res.data.object.username,
                        idCardNo: res.data.object.idCardNo,
                        telphone: res.data.object.telphone
                      })
                      .then(result => {
                        console.log(result);
                        this.$router.push('/home');
                      });
                  } else {
                    this.$router.push('/home');
                    // this.$router.go(-1);
                  }
                } else {
                  // this.$router.go(-1)
                  this.$router.push('/home');
                }
              });
            });
          } else {
            Dialog.confirm({
              title: '温馨提示',
              message: `${res.data.message}`,
              confirmButtonText: '确认',
              cancelButtonText: '前往积分规则'
            })
              .then(() => {})
              .catch(() => {
                this.$router.push('/points-exp?code=0');
              });
          }
        });
    }
  },
  components: {
    'van-nav-bar': NavBar,
    'van-field': Field,
    'van-button': Button
  }
};
</script>

<style scoped lang="scss">
.code {
  width: 190px;
  height: 65px;
}
.warn_title {
  width: 100%;
  height: 80px;
  color: #9a9a9a;
  font-size: 30px;
  letter-spacing: 2px;
  line-height: 80px;
  padding-left: 30px;
}
.nav {
  height: 1.17333rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-size: 34px;
  .back {
    flex: 48%;
    margin-left: 22px;
    .leftCoin {
      color: #010101;
      width: 20px;
      height: 20px;
      border-top: 2px solid #010101;
      border-left: 2px solid #010101;
      transform: rotate(-45deg);
      display: inline-block;
    }
  }
  .center {
    flex: 70%;
  }
}
.van-nav-bar__left,
.van-nav-bar__right {
  bottom: inherit;
}

.head {
  width: 750px;
  height: 88px;
  justify-content: center;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}
.van-nav-bar__title {
  @include sc(34px, #0a0a0a);
}
.van-nav-bar__text {
  @include sc(34px, #010101);
}
.van-nav-bar .van-icon {
  color: #010101;
}
.prompt {
  width: 100%;
  /*height: 1334px;*/
  /*border:1px solid #ccc;*/
  margin-top: 34px;
  margin-bottom: 16px;
  margin-left: 31px;
}
.promptFont {
  width: 335px;
  height: 27px;
  @include sc(28px, #7f7f7f);
}
.finish {
  margin-top: 80px;
  width: 690px;
  border-radius: 12px;
  @include sc(40px, #eaecef);
  margin: 80px auto;
  display: block;
}
.van-cell__title span {
  width: 93px;
  height: 30px;
  font-size: 32px;
}
.van-cell {
  background-color: #ffffff;
  display: flex;
  align-items: center;
}
.mask {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
}
.confirm-popup {
  text-align: center;
  padding: 30px;
  width: 620px;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 20px;
  padding-bottom: 100px;
  padding-top: 270px;
  overflow: hidden;
  background-image: url($imgPath+'jifen/cloudback.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  .red_font {
    font-size: 38px;
  }
  .title {
    @include sc(40px, #fff);
    position: absolute;
    top: 58px;
    margin: 0 auto;
    left: 0;
    right: 0;
  }
  .content {
    padding-bottom: 100px;
    p {
      @include sc(28px, #5a5a5a);
      padding-bottom: 20px;
    }
  }
  .btn_wrapper {
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    border-top: 1px solid #d5d5d5;
    button {
      width: 50%;
      border: 0;
      border-right: 1px solid #d5d5d5;
      background-color: #fff;
      font-size: 32px;
      &.confirm {
        color: #2795fe;
      }
      &:last-child {
        border-right: 0;
      }
    }
  }
}
.rule-radio {
  @include sc(28px, #9f9f9f);
  padding: 15px 30px;
  .icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: text-top;
    @include bis('../../assets/images/radio_off.png');
    &.on {
      @include bis('../../assets/images/radio_on.png');
    }
  }
}
.rule-wrapper {
  height: 900px;
  overflow: auto;
  background-color: #fff;
  padding: 25px;
  h1 {
    @include sc(34px, #232323);
    text-align: center;
    font-weight: 600;
  }

  h2 {
    font-weight: 600;
    @include sc(32px, #232323);
    margin-top: 65px;
    margin-bottom: 40px;
    &.first {
      margin-top: 40px;
    }
  }

  p {
    text-indent: 30px;
    @include sc(24px, #232323);
    line-height: 38px;
    text-align: justify;
    &:first-child {
      margin-top: 20px;
    }
  }
}
.van-dialog {
  width: 90%;
  .van-button {
    color: blue;
  }
}
</style>
